<template>
   <div class="tar-bar-item" @click="itemClick">
          <slot v-if="!isActive" name="item-icon"></slot>
          <slot v-else name="item-icon-active"></slot>
          <!-- <div :class="{active:isActive}">
                <slot name="item-name"></slot>
          </div> -->
          <!-- 动态属性 -->
          <div :style="activeStyle">
                <slot name="item-name"></slot>
          </div>
    </div>
</template>

<script>
export default {
    name:'TabbarItem',
    props: {
        path:String,
        activeColor:{
            type:String,
            default:'orangered'
        }
    },
    data () {
        return {
            // isActive:true
        }
    },
    computed: {
        isActive(){
            // 当前活跃的路由是否包含当前的path
            return this.$route.path.indexOf(this.path)!=-1;
        },
        // 活跃的动态修改颜色
        activeStyle(){
            return this.isActive?{color:this.activeColor}:{}
        }
    },
    methods: {
        itemClick(){
            console.log('itemClick:'+this.path)
            this.$router.replace(this.path)
        }
    }
}
</script>

<style>
  .tar-bar-item{
    /* 均等分 */
    flex: 1; 
    text-align: center;
    /* 移动端开发的高度 */
    height: 49px;
  }
  .tar-bar-item img{
      height: 24px;
      width: 24px;
      margin-top: 3px;
      vertical-align: middle;
      margin-bottom: 2px;
  }
  /* .active{
      color: orangered;
  } */
</style>